<template>
  <div v-if="sureAdmin">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->

      <el-breadcrumb-item>钱包管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="6" :offset="17">
          <el-input
            placeholder="搜索手机号或者用户名"
            v-model="query"
            clearable
            @clear="getWalletList"
            type="primary"
          >
            <el-button
              class="button"
              slot="append"
              icon="el-icon-search"
              @click="getWalletPhone(1)"
            ></el-button
          ></el-input>
        </el-col>
      </el-row>

      <!-- 用户钱包列表区域 -->
      <el-table :data="walletList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="用户名" prop="name"></el-table-column>
        <el-table-column label="用户手机" prop="phone"></el-table-column>
        <el-table-column label="钱包余额" prop="balance">
          <template slot-scope="scope">
            {{ scope.row.balance / 100 }}元
          </template>
        </el-table-column>
        <el-table-column label="修改余额" width="180px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showCheckDialog(scope.row.id, scope.row.balance)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="清空余额" width="180px">
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="emptyWallet(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 验证身份的对话框 -->
    <el-dialog
      title="验证身份"
      :visible.sync="checkDialogVisible"
      width="30%"
      @close="checkDialogClosed"
    >
      <el-form
        :model="checkForm"
        :rules="checkFormRules"
        ref="checkFormRef"
        label-width="80px"
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="checkForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="checkForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkAdmin">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改余额的对话框 -->
    <el-dialog
      title="修改余额"
      :visible.sync="editDialogVisible"
      width="30%"
      @close="editDialogClosed"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-form-item label="余额">
          <el-input
            v-model="price"
            type="number"
            min="1"
            @mousewheel.native.prevent
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editBalance">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取用户钱包列表的参数对象
      queryInfo: {
        // 当前的页数
        pageNo: 1,
        // 当前每页显示多少条数据
        pageSize: 10,
      },
      //模糊查询
      query: "",
      walletList: [],
      total: 0,
      sureAdmin: false,
      checkDialogVisible: false,
      editDialogVisible: false,
      checkForm: {
        account: "",
        password: "",
      },
      // 这是表单的验证规则对象
      checkFormRules: {
        // 验证用户名是否合法
        account: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
      },
      editForm: {
        id: "",
        balance: "",
      },
      price: 0,
    };
  },
  created() {
    var Admin = window.localStorage.getItem("admin");
    if (Admin == 1) {
      this.sureAdmin = true;
      //获取用户钱包列表
      this.getWalletList();
    } else {
      this.sureAdmin = false;
    }
  },
  methods: {
    //获取用户钱包列表(调用后台接口)
    async getWalletList() {
      const { data: res } = await this.$http.get("wallet/listWallet", {
        params: this.queryInfo,
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取用户钱包列表失败！");
      }
      this.total = res.data.count;
      this.walletList = res.data.listWalletVOs;
    },
    async getWalletPhone(pageNo) {
      this.queryInfo.pageNo = pageNo;
      const { data: res } = await this.$http.get(
        "wallet/listWalletLikePhone?keyWord=" + this.query,
        {
          params: this.queryInfo,
        }
      );
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取用户钱包列表失败！");
      }
      this.total = res.data.count;
      this.walletList = res.data.wallets;
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      if (this.query === "") {
        this.queryInfo.pageSize = newSize;
        this.getWalletList();
      } else {
        this.queryInfo.pageSize = newSize;
        this.getWalletPhone(this.queryInfo.pageNo);
      }
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      if (this.query === "") {
        this.queryInfo.pageNo = newPage;
        this.getWalletList();
      } else {
        this.queryInfo.pageNo = newPage;
        this.getWalletPhone(this.queryInfo.pageNo);
      }
    },
    // 根据Id删除对应的用户钱包信息
    async emptyWallet(id) {
      console.log(id);
      // 弹框询问用户钱包是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户钱包, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      // 如果用户钱包确认删除，则返回值为字符串 confirm
      // 如果用户钱包取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      let params = new FormData();
      params.append("id", id);
      //调用删除接口
      const { data: res } = await this.$http.get(
        "wallet/clearBalance?id=" + id
      );

      if (res.code !== 200) {
        this.$message.error("清空用户钱包失败！");
      } else {
        this.$message.success("清空用户钱包成功！");
      }
      this.queryInfo.pageNo = 1;
      this.query = "";
      this.getWalletList();
    },
    showCheckDialog(id, balance) {
      // var useId = id;
      this.checkDialogVisible = true;
      console.log("原方法", id, balance);
      this.checkAdmin();
      this.editForm.id = id;
      this.price = balance / 100;
    },
    checkDialogClosed() {
      this.$refs.checkFormRef.resetFields();
    },
    async checkAdmin() {
      this.$refs.checkFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post(
            "login/login",
            this.checkForm
          );
          console.log("xxxxx", res);
          if (res.code !== 200) {
            this.editForm.id = 0;
            this.editForm.balance = 0;
            this.price = 0;
            return this.$message.error("验证失败！");
          }
          if (res.data.admin !== 1) {
            this.editForm.id = 0;
            this.editForm.balance = 0;
            this.price = 0;
            return this.$message.error("你没有此权限");
          }
          this.checkDialogVisible = false;
          this.editDialogVisible = true;
        }
      });
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    async editBalance() {
      if (this.price == "") {
        this.price = 0;
      }
      this.editForm.balance = this.price * 100;
      console.log("price", this.price);
      console.log("id", this.editForm.id);
      console.log("price", this.editForm.balance);
      const { data: res } = await this.$http.post(
        "wallet/updateWallet",
        this.editForm
      );
      console.log("xxxx", res);
      if (res.code !== 200) {
        return this.$message.error("修改失败！");
      } else {
        this.editDialogVisible = false;
        this.getWalletList();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.button:hover {
  background-color: rgb(64, 158, 255);
  color: rgb(255, 255, 255);
}
</style>
